<template>
  <div>
    <!-- 需求： 顶部展示一级二级菜单，点击顶部二级菜单，如果有三级就在左侧展示二级剩余菜单，使用element-plus -->
    <!-- 顶部菜单 -->
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      mode="horizontal"
      background-color="#eee"
    >
      <template v-for="item in menuObj">
        <!-- 如果有二级菜单使用 el-sub-menu，如果没有使用  el-menu-item-->
        <el-sub-menu
          :key="item.path"
          :index="item.path"
          :disabled="item.disabled"
          v-if="item.children && item.children.length > 0"
        >
          <template #title>
            <i :class="item.meta.icon"></i>
            <span>{{ item.meta.title }}</span>
          </template>

          <el-menu-item
            v-for="item2 in item.children"
            :key="item2.path"
            :index="item2.path"
            :disabled="item2.disabled"
            @click="handleClick2(item2)"
          >
            <i :class="item2.meta.icon"></i>
            <div class="text2-icon">
              <span>
                {{ item2.meta.title }}
              </span>
              <el-icon v-if="item2.children" :size="15" class="icon">
                <ArrowRight />
              </el-icon>
            </div>
          </el-menu-item>
        </el-sub-menu>

        <!--不使用 el-sbu-menu 独立一级-->
        <el-menu-item :index="item.path" @click="handleClick2(item)" v-else>
          <i :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span></el-menu-item
        >
      </template>
    </el-menu>

    <!-- 左侧二级剩余所有菜单 leftMenu-->
    <!-- 递归组件 -->
    <div class="left-box" v-if="flag">
      <menu-tree :menuList="leftMenu"></menu-tree>
    </div>
  </div>
</template>
<script setup>
// 引入递归组件
import MenuTree from "./MenuTree.vue";
import { ref } from "vue";

// path: "/system/department",
//         name: "部门管理",
//         children: null,
//         meta: {
//           title: "部门管理",
//           isLink: false,
//           isHide: false,
//           isKeepAlive: false,
//           isAffix: false,
//           isIframe: false,
//           icon: "el-icon-office-building",
//         },

//所有菜单数据
let menuObj = [
  {
    path: "/home",
    name: "首页",
    children: [
      {
        path: "/kjzj",
        name: "开机自检",
        children: null,
        meta: {
          title: "部门管理",
          isLink: false,
          isHide: false,
          isKeepAlive: false,
          isAffix: false,
          isIframe: false,
          icon: "el-icon-office-building",
        },
        component: () => import("@/views/home/children/kjzj.vue"),
      },
      {
        path: "/aqlj",
        name: "安全连接",
        children: null,
        meta: {
          title: "部门管理",
          isLink: false,
          isHide: false,
          isKeepAlive: false,
          isAffix: false,
          isIframe: false,
          icon: "el-icon-office-building",
        },
        component: () => import("@/views/home/children/aqlj.vue"),
      },
      {
        path: "/jgfs",
        name: "激光发射",
        children: null,
        meta: {
          title: "部门管理",
          isLink: false,
          isHide: false,
          isKeepAlive: false,
          isAffix: false,
          isIframe: false,
          icon: "el-icon-office-building",
        },
        component: () => import("@/views/home/children/jgfs.vue"),
      },
      {
        path: "/mbbh",
        name: "目标捕获与识别",
        children: null,
        meta: {
          title: "部门管理",
          isLink: false,
          isHide: false,
          isKeepAlive: false,
          isAffix: false,
          isIframe: false,
          icon: "el-icon-office-building",
        },
        component: () => import("@/views/home/children/mbbh.vue"),
      },
      {
        path: "/mbgz",
        name: "目标跟踪与瞄准",
        children: null,
        meta: {
          title: "部门管理",
          isLink: false,
          isHide: false,
          isKeepAlive: false,
          isAffix: false,
          isIframe: false,
          icon: "el-icon-office-building",
        },
        component: () => import("@/views/home/children/mbgz.vue"),
      },
      {
        path: "/mbss",
        name: "目标搜索与方位引导",
        children: null,
        meta: {
          title: "部门管理",
          isLink: false,
          isHide: false,
          isKeepAlive: false,
          isAffix: false,
          isIframe: false,
          icon: "el-icon-office-building",
        },
        component: () => import("@/views/home/children/mbss.vue"),
      },
    ],
    meta: {
      title: "首页",
      isLink: false,
      isHide: false,
      isKeepAlive: false,
      isAffix: false,
      isIframe: false,
      icon: "el-icon-s-home",
    },
  },
  {
    path: "/rwlcjgn",
    name: "ExampleHelloIndex5",
    component: () => import("@/views/rwlcjgn/rwlcjgn.vue"),
    children: null,
    meta: {
      title: "系统管理",
      isLink: false,
      isHide: false,
      isKeepAlive: false,
      isAffix: false,
      isIframe: false,
      icon: "el-icon-setting",
    },
  },
  {
    path: "/dlsf",
    name: "ExampleHelloIndex4",
    children: null,
    meta: {
      title: "系统管理",
      isLink: false,
      isHide: false,
      isKeepAlive: false,
      isAffix: false,
      isIframe: false,
      icon: "el-icon-setting",
    },
  },
];

// 三级菜单数据
let leftMenu = ref([]);
// 是否显示三级菜单（左侧的显示时机）
let flag = ref(false);
// 点击二级菜单展示左侧菜单
const handleClick2 = (item) => {
  if (item.children) {
    leftMenu.value = item.children;
    flag.value = true;
  } else {
    leftMenu.value = [];
    flag.value = false;
  }
  console.log("😂👨🏾‍❤️‍👨🏼==>：", item);
};
</script>

<style lang="scss" scoped>
.left-box {
  width: 200px;
  height: calc(100vh - 58.4px);
  background-color: #545c64;
  color: #fff;
  animation: fold linear 0.1s;
}

@keyframes fold {
  0% {
    width: 0;
  }

  50% {
    width: 100px;
  }

  100% {
    width: 200px;
  }
}

.text2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #929396;

  .icon {
    position: absolute;
    right: 10px;
  }
}
</style>
